<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据集导入</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<!-- jQuery-->
		<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>

		<!-- layui-->
		<link rel="stylesheet" href="/static/plugins/layui/2.8.4/css/layui.css" media="all">
		<script src="/static/plugins/layui/2.8.4/layui.js" charset="utf-8"></script>
		
		
	</head>
	<style>
		.all-view{
			width: 90%;
			margin: 0 auto;
			margin-top: 20px;
		}
		.btn-view{
			margin-bottom: 10px;
			
		}
		.down-example{
			margin-top: 7px; 
			color: #00aaff;
		}
		.upload-tip{
			float: right;
		}
		.add-btn{
			width:120px;
		}
		.bottom-view{
			position: fixed;
			bottom: 0;
			width: 100%;
		}
		.add-btn-view{
			width: 260px;
			margin: 0 auto;
			margin-bottom: 40px;
		}
	</style>
	
	<body>
		
		<!--头部输入框-->
		
		<form class="layui-form layui-form-pane all-view" action="">
		
			<div class="layui-form-item">
				<label class="layui-form-label">数据集名称</label>
				<div class="layui-input-block">
				  <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			  </div>
		
			<div class="layui-form-item">
				 <a href="#forget" class="down-example">下载模版样例</a>
			  </div>  
		
		
		
			<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
			  <i class="layui-icon layui-icon-upload"></i> 
			  <div>点击上传，或将文件拖拽到此处</div>
			  <div class="layui-hide" id="ID-upload-demo-preview">
			    <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
			  </div>
			</div>
			
			  <div class="upload-tip">支持：txt、pdf、doc、docx....</div>
			  
			  
			 
		</form>
		
	<div class="bottom-view">
		<div class="layui-btn-container add-btn-view">
		  <button type="button" class="layui-btn layui-btn-primary layui-border-blue add-btn">确定</button> 
		  <button type="button" class="layui-btn layui-btn-primary layui-border add-btn">取消</button> 
		</div>
	</div>
		
		
		<script>
			layui.use(function(){
			  var upload = layui.upload;
			  var $ = layui.$;
			  // 渲染
			  upload.render({
			    elem: '#ID-upload-demo-drag',
			    url: '', // 实际使用时改成您自己的上传接口即可。
			    done: function(res){
			      layer.msg('上传成功');
			      $('#ID-upload-demo-preview').removeClass('layui-hide')
			      .find('img').attr('src', res.files.file);
			      console.log(res)
			    }
			  });
			});
		</script>
		
	</body>
</html>